﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>Coming Soon  :: Veera - Multipurpose eCommerce Bootstrap 4 Template</title>

        <!--=== Favicon ===-->
    <link rel="shortcut icon" href="http://demo.devitems.com/veera/veera/assets/img/favicon.ico" type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,600,700,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">


    <!--=== Revolution Slider CSS ===-->
    <link href="th/assets/css/revslider/settings.css" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="th/assets/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="th/assets/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Dl Icon CSS ===-->
    <link href="th/assets/css/vendor/dl-icon.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->

    <!--=== Helper CSS ===-->
    <link href="th/assets/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="th/assets/css/style.css" rel="stylesheet">
    
    <!-- Modernizer JS -->
    <script src="th/assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body class="preloader-active">
<!--== Start PreLoader Wrap ==-->
<div class="preloader-area-wrap">
    <div class="spinner d-flex justify-content-center align-items-center h-100">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>
<!--== End PreLoader Wrap ==-->

<!--== Start Coming Soon Page Wrapper ==-->
<div id="coming-soon-page-wrapper">
    <div class="container h-100">
        <div class="row h-100">
            <div class="col-lg-12 my-auto text-center">


                <div class="coming-soon-content-wrap" th:if="${orderId!=null}">
                    <h2  style="font-size: 5rem">订单号</h2>
                    <br>
                    <h2 th:text="${orderId}" id="orderId_value" style="font-size: 7rem">Coming Very Soon</h2>
                    <br>
                    <p class="col-md-8 col-lg-6 m-auto" style="font-size: 2rem">订单已生成，请在规定时间内完成支付</p>

                    <div class="coming-soon-count-down mt-70 mt-sm-30">
                        <div class=" d-flex justify-content-center" >
                            <div class="countdown-item"><span class="countdown-time" id="getMinute" th:text="${minute}">00</span><span class="countdown-label">分</span></div>
                            <div class="countdown-item"><span class="countdown-time" id="getSecond" th:text="${second}">40</span><span class="countdown-label">秒</span></div>
                        </div>
                    </div>

                    <div class="newsletter-content-wrap mt-80 mt-sm-30 col-md-8 col-lg-6 m-auto">
                        <div class="newsletter-area">


                            <!-- mailchimp-alerts Start -->
                            <div class="mailchimp-alerts">
                                <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                <div class="mailchimp-success"></div><!-- mailchimp-success end -->
                                <div class="mailchimp-error"></div><!-- mailchimp-error end -->
                            </div>
                            <!-- mailchimp-alerts end -->
                        </div>
                    </div>

                    <a th:href="@{toPayIndex(orderId = ${orderId})}" class="btn btn-black mt-96 mt-sm-30">去支付</a>
                    <a href="index.html" class="btn btn-black mt-96 mt-sm-30">返回</a>
                </div>

                <div class="coming-soon-content-wrap" th:if="${orderId==null}">
                    <h2>Coming Very Soon</h2>
                    <p class="col-md-8 col-lg-6 m-auto">Nulla imperdiet odio tempor nisl vulputate scelerisque. Fusce interdum ultricies convallis. Vivamus efficitur puru </p>

                    <div >
                        <div class="sale-countdown d-flex justify-content-center" >
                            <div ><span >00</span><span class="countdown-label">分</span></div>
                            <div ><span >40</span><span class="countdown-label">秒</span></div>
                        </div>
                    </div>

                    <div class="newsletter-content-wrap mt-80 mt-sm-30 col-md-8 col-lg-6 m-auto">
                        <div class="newsletter-area">
                            <form action="https://company.us19.list-manage.com/subscribe/post?u=2f2631cacbe4767192d339ef2&amp;id=24db23e68a"
                                  method="post" id="mc-form" class="mc-form">
                                <input type="email" id="mc-email" autocomplete="off"
                                       placeholder="Enter Email Address" required/>
                                <button class="btn" type="submit">subscribe</button>
                            </form>

                            <!-- mailchimp-alerts Start -->
                            <div class="mailchimp-alerts">
                                <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                <div class="mailchimp-success"></div><!-- mailchimp-success end -->
                                <div class="mailchimp-error"></div><!-- mailchimp-error end -->
                            </div>
                            <!-- mailchimp-alerts end -->
                        </div>
                    </div>

                    <a href="index.html" class="btn btn-black mt-96 mt-sm-30">Back to Home</a>
                </div>

            </div>
        </div>
    </div>
</div>
<!--== End Coming Soon Page Wrapper ==-->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="th/assets/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="th/assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="th/assets/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="th/assets/js/vendor/bootstrap.min.js"></script>
<!--=== Plugins Js ===-->
<script src="th/assets/js/plugins.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="th/assets/js/ajax-mail.js"></script>

<!--=== Active Js ===-->
<script src="th/assets/js/active.min.js"></script>

<!--=== Revolution Slider Js ===-->
<script src="th/assets/js/revslider/jquery.themepunch.tools.min.js"></script>
<script src="th/assets/js/revslider/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->
<script src="th/assets/js/revslider/extensions/revolution.extension.actions.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.carousel.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.kenburn.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.migration.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.navigation.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.parallax.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.slideanims.min.js"></script>
<script src="th/assets/js/revslider/extensions/revolution.extension.video.min.js"></script>


<script src="th/assets/js/revslider/revslider-active.js"></script>
<script type="text/javascript" >

  /*  function getTime() {
        //时间差

        var orderId_value = $("#orderId_value").html();
        $.getJSON(
            "wlcGetleftTime",{"orderId":orderId_value},function (getDateTime) {
                //定义变量 d,h,m,s保存倒计时的时间
                if (getDateTime >= 0) {
                    var m = parseInt(getDateTime / 1000 / 60 % 60);
                    var s = parseInt(getDateTime / 1000  % 60);
                    $("#getMinute").html(m);
                    $("#getSecond").html(s);
                }
            }
        )



    }
    var timer1 = setInterval(getTime, 1000);
    /!*!//递归每秒调用countTime方法，显示动态时间效果
    setTimeout(this.countTime, 1000);*!/*/

    function count_down(){
        var orderId_value = $("#orderId_value").html();
        $.getJSON(
            "wlcGetleftTime",{"orderId":orderId_value},function (data) {
                var minute = parseInt(data / 1000 / 60 % 60);
                var seconds = parseInt(data / 1000  % 60);
                if (minute == 0 && seconds == 0) {

                } else {
                    $("#getMinute").html(minute);
                    $("#getSecond").html(seconds);
                }
            }
        )



    }
  count_down();
    var timer1 = setInterval(count_down, 1000);

</script>
</body>
</html>
